<template>
  <!-- 弃用球体运动 -->
  <div class="w-full">
    <div class="coin-animation">
      <div class="animation-center">
        <img src="@/assets/image/home/right_arrow.png" class="animation-center-img" >
      </div>
      <div class="coin-img">
        <img src="@/assets/image/symbol/btc2.png" >
        <img src="@/assets/image/symbol/usdt.png" >
        <img src="@/assets/image/symbol/sol.png" >
      </div>
      <div class="coin-img">
        <img src="@/assets/image/symbol/biance.png" >
        <img src="@/assets/image/symbol/mask.png" >
        <img src="@/assets/image/symbol/pops.png" >
      </div>
      <div class="coin-img">
        <img src="@/assets/image/symbol/eth.png" >
        <img src="@/assets/image/symbol/defi.png" >
        <img src="@/assets/image/symbol/v.png" >
      </div>
      <div class="coin-bor"></div>
    </div>
  </div>
</template>

<script>
export default {
  
}
</script>
<style lang="scss" scoped>
.coin-animation {
  width: 100%;
  height: 165px;
  position: relative;
  right: -272px;
  bottom: -282px;
  z-index: 1;
  .animation-center{
    width: 130px;
    height: 130px;
    border: .013rem solid #bcff2f;
    z-index: 2;
    background-color: #1c1c1e;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .animation-center-img {
    width: 80px;
    height: 80px;
  }
  .coin-bor{
    width: 970px;
    height: 970px;
    border-radius: 50%;
    border: .013rem solid #2f2f32;
    position: absolute;
    top: calc(50% - 485px);
    left: calc(50% - 485px);
  }
  .coin-img {
    width: 320px;
    height: 320px;
    border-radius: 50%;
    border: .013rem solid #2f2f32;
    position: absolute;
    top: calc(50% - 160px);
    left: calc(50% - 160px);
    -webkit-animation: spin 10s linear infinite;
    animation: spin 10s linear infinite;
    img:first-of-type {
      width: 54px;
      position: absolute;
      top: 19px;
      left: 6px;
    }
    img:nth-of-type(2) {
      top: 199px;
    }
    img:nth-of-type(2) {
      width: 54px;
      position: absolute;
      top: 138;
      left: 55px;
    }
    img:nth-of-type(3) {
      width: 54px;
      position: absolute;
      top: 83px;
      left: -17px;
    }
  }
  .coin-img:nth-of-type(2) {
    width: 536px;
    height: 536px;
    top: calc(50% - 268px);
    left: calc(50% - 268px);
    animation: spin 20s linear infinite;
  }
  .coin-img:nth-of-type(3) {
    width: 752px;
    height: 752px;
    top: calc(50% - 376px);
    left: calc(50% - 376px);
    animation: spin 30s linear infinite;
    img:first-of-type {
      top: 41px;
    }
    img:nth-of-type(2) {
      top: 248px;
    }
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


</style>
